<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单示例</title>
    <style>
        /* 在这里添加你自己的样式 */
    </style>
    <link rel="stylesheet" href="style.css">

</head>

<body>
<h1 id="title">表单示例</h1>
<p id="description">这是一个表单示例</p>
<form id="survey-form" autocomplete="on" novalidate>     <!-- novalidate 取消浏览器默认的验证 自动填充表单 -->

    <div>
        <label for="name" id="name-label">Name：</label>
        <br>
        <input type="text" id="name" placeholder="Enter your name" autofocus required>    <!-- 自动聚焦并必填 -->

    </div>
    <div>
        <label for="email" id="email-label">E-Mail：</label>
        <br>
        <input type="email" id="email" placeholder="Enter your E-Mail" required>
    </div>
    <div>
        <label for="number" id="number-label">Age：</label>
        <br>
        <input type="number" id="number" placeholder="age" min="1" max="100" required>
    </div>
    <div>
        <label for="role" id="role-label">Which option best describes your current role?</label>
        <br>
        <input type="text" id="role" placeholder="Select your current role" required>
    </div>
    <div>
        <label for="dropdown">下拉选择：</label>
        <select id="dropdown">
            <option value="option1">选项1</option>
            <option value="option2">选项2</option>
        </select>
    </div>
    <div>
        <p>Would you recommend freeCodeCamp to a friend?</p>
        <label><input type="radio" id="option1" name="radio-group">Definitely</label>
        <label><input type="radio" id="option2" name="radio-group">Maybe</label>
        <label><input type="radio" id="option3" name="radio-group">Not sure</label>
    </div>
    <div>
        <p>What would you like to see improved? (Check all that apply)</p>
        <label><input type="checkbox" value="value1">Front-end Projects</label><br>
        <label><input type="checkbox" value="value2">Back-end Projects</label><br>
        <!-- 其余复选框省略 -->
    </div>
    <div>
        <label for="comments">Any comments or suggestions?</label>
        <br/>
        <textarea id="comments" rows="4" cols="50" placeholder="Enter your comment here"></textarea>
    </div>
    <button type="submit" id="submit">提交</button>
</form>

<script>
    document.getElementById("survey-form").addEventListener("submit", function (event) {
        event.preventDefault();
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var number = document.getElementById("number").value;
        var role = document.getElementById("role").value;
        var dropdown = document.getElementById("dropdown").value;
        var option1 = document.getElementById("option1").checked;
        var option2 = document.getElementById("option2").checked;
        var option3 = document.getElementById("option3").checked;
        var comments = document.getElementById("comments").value;

        console.log("姓名：" + name);
        console.log("邮箱：" + email);
        console.log("年龄：" + number);
        console.log("角色：" + role);
        console.log("下拉选择：" + dropdown);
        console.log("推荐：" + option1);
        console.log("Maybe：" + option2);
        console.log("Not sure：" + option3);
        console.log("评论：" + comments);
    });
</script>
</body>
</html>
